<template>
  <div class="shop">
    <!-- 顶部导航组件 -->
    <nav-bar class="header_nav">
      <i
        slot="icon"
        class="iconfont icon-yishoucang active"
        v-if="collectId.includes(parseInt(shop_id))"
        @click="Collect"
      ></i>
      <i slot="icon" class="iconfont icon-shoucang" v-else @click="Collect"></i>
    </nav-bar>
    <!-- 店铺信息组件 -->
    <shop-info @showActivty="ActivtyView" />
    <!-- tab栏组件 -->
    <tabs :shopId="parseInt(shop_id)" />
    <router-view />
    <!-- 活动列表组件 -->
    <activity-list :activity="activity" @click.native="ActivtyView('')" />
  </div>
</template>

<script>
import ShopInfo from './children/Info';
import Tabs from './children/Tabs';
import ActivityList from './children/ActivityList';

import { getCollectList, collectShop, removeCollect } from '@/network/getData';
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      lat: '', // 纬度
      lng: '', // 经度
      shop_id: null, // 店铺ID
      activity: null, // 活动列表数据
      collectId: [] // 收藏列表ID
    };
  },
  components: {
    ShopInfo,
    Tabs,
    ActivityList
  },
  created() {
    this.lat = this.$route.query.lat;
    this.lng = this.$route.query.lng;
    this.shop_id = this.$route.query.shopId;
    this.SAVE_SHOP_ID(this.$route.query.shopId);
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['SAVE_SHOP_ID', 'SAVE_LOCATION']),
    // 显示活动列表
    ActivtyView(data) {
      if (data) {
        this.activity = data;
      } else {
        this.activity = [];
      }
    },
    initData() {
      if (this.userInfo && this.userInfo.id) {
        // 获取收藏
        getCollectList(this.userInfo.id).then(res => {
          res.data.forEach(item => {
            this.collectId.push(item.shop_id);
          });
        });
      }
    },
    // 添加或删除收藏
    Collect() {
      if (!(this.userInfo && this.userInfo.id)) {
        this.$comfirm({ title: '请先登录' }).then(res => {
          if (res === 'confirm') {
            this.$router.push('/login');
          }
        });
        return false;
      }
      const id = { user_id: this.userInfo.id, shop_id: this.shop_id };
      // 如果包含就删除否则添加
      if (this.collectId.includes(parseInt(this.shop_id))) {
        removeCollect(id).then(res => {
          if (res.code === 200) {
            const index = this.collectId.indexOf(this.shop_id);
            this.collectId.splice(index, 1);
          }
        });
      } else {
        collectShop(id).then(res => {
          if (res.code === 200) {
            this.collectId.push(parseInt(this.shop_id));
          }
        });
      }
    }
  },
  watch: {
    userInfo() {
      this.initData();
    }
  }
};
</script>

<style lang="less" scoped>
.shop {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.header_nav {
  background-color: #00000000;
}
.active {
  color: var(--color-base) !important;
}
</style>
